<!-- 组件说明 -->
<template>
  <div id="home">
      <nav-bar class="home-nav">
        <div slot="center">购物街</div>
      </nav-bar>
      <!-- <h2>首页</h2> -->

     

      

      <scroll class="content" ref="scroll" @scroll='contentScroll' :probeType='3' :pullUpLoad='true'  @pullingUp='loadMore'>
        <van-swipe class="banner-swipe" :autoplay="3000">
          <van-swipe-item v-for="(banner,index) in banners.list" :key="index">
            <img :src="banner.image" >
          </van-swipe-item>
        </van-swipe>

        <recommend-view :recommends='recommends.list'/>
        <tab-control :titles='titles' @tabClick='tabClick' ref="tabControl"/>
        <goods-list :goods='showGoods' />
      </scroll>

      <BackTop @click.native='backTop' v-show="isShowBackTop"/>

     
  </div>
  
</template>

<script>

  import NavBar from 'components/common/navbar/NavBar'
  import Scroll from 'components/common/scroll/Scroll'
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodsList from 'components/content/goods/GoodsList'
  import BackTop from 'components/content/backTop/BackTop'

  import {debounce} from 'common/utils'
  


  import RecommendView from './childComps/RecommendView';
  

  

  import {getHomeMultidata, getHomeGoodsData} from 'network/home'
  import {
 
    Swipe,
    SwipeItem,
  } from 'vant';


  export default {
    name: "Home",
    components: {
      NavBar,
      Scroll,
      TabControl,
      GoodsList,
      BackTop,

      RecommendView,
      
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
    },
    data () {
      return {
        banners: [],
        recommends: [],
        titles: [],
        goods: {
          'pop': {page: 0, list: []},
          'hot': {page:0, list: []},
          'sell': {page:0, list: []},
        },
        currentType: 'pop',
        isShowBackTop: false,
       
        
      };
    },
    created() {
      //1.请求多个数据
      
      this.getHomeMultidata();
      this.getHomeGoodsData('pop');
      this.getHomeGoodsData('hot');
      this.getHomeGoodsData('sell');
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list
      }
    },
    mounted() {
      //最好放在mounted中，因为放created中可能获取不到元素和组件对象
      const refresh = debounce(this.$refs.scroll.refresh, 200) //防抖动，这样就不用每次图片加载完就调一次refresh，减轻网络请求,注意这里是传的函数，而不加括号去调用
      this.$bus.$on('imageLoad', () => {
        console.log('bus')
        
        // this.$refs.scroll.refresh()
        refresh();
      })


    
    },
    
    methods: {
      /**
       * 网络请求相关方法
       */
      getHomeMultidata() {
        getHomeMultidata().then(res => {
          console.log(res)
          //箭头函数的this会往上找,也就是created中的this
          this.banners = res.data.banners;
          this.recommends = res.data.recommends;
          this.titles = res.data.titles;
        })
      },

      getHomeGoodsData(type) {
        console.log(type)
        const page = this.goods[type].page + 1;
        getHomeGoodsData(type, page).then(res => {
          console.log(res.data)
          this.goods[type].list.push(...res.data);
          this.goods[type].page += 1;
          this.$refs.scroll.finishPullUp();
        })
      },

      contentScroll(position) {
        // console.log(position)
        this.isShowBackTop = (-position.y) > 400;

      },

      loadMore() {
        console.log('上拉加载更多')
        this.getHomeGoodsData(this.currentType)
      },


   

      


      

      /**
       * 事件监听相关方法
       */
      tabClick(index) {
        console.log(index)
        switch(index) {
          case 0:
            this.currentType = 'pop';
            break;
          case 1:
            this.currentType = 'hot';
            break;
          case 2:
            this.currentType = 'sell';
            break;
        }
      },
      
      backTop() {
        console.log('test')
        this.$refs.scroll.scrollTo(0, 0)
      },
    },
  
  }
</script>

<style  scoped>
    #home {
      /* padding-top: 44px; */
      /* padding-bottom: 50px; */
      height: 100vh;

       /* 使用44就不会被头部部的navbar遮住了，因为navbar的高度是44 */
      /* 使用50就不会被底部的tabbar遮住了，因为底部的高度也是50 */
    }
    .home-nav {
        background-color: var(--color-tint);
        color: #fff;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
    }

    .banner-swipe {
        height: 200px;
    }

    .banner-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

   .banner-swipe img {
      width: 100%;
      display: block;
    }

    .tab-control {
      background-color: white;
    }
    .content {
      position: absolute;
      overflow: hidden;
      top: 44px;
      bottom: 49px;
      left: 0;
      right: 0;
    }

</style>